<!-- TTS Content Tab -->
<div id="tts-content" class="tab-content">
    <div class="container">
        <h2 class="tab-title">
            <i class="fas fa-microphone-alt"></i> Text-to-Speech System
        </h2>

        <!-- Provider Status Bar -->
        <div class="provider-status-bar">
            <div class="status-grid">
                <div class="status-item" data-provider="vibevoice">
                    <span class="status-indicator" id="status-vibevoice"></span>
                    <span>VibeVoice</span>
                </div>
                <div class="status-item" data-provider="kokoro">
                    <span class="status-indicator" id="status-kokoro"></span>
                    <span>Kokoro</span>
                </div>
                <div class="status-item" data-provider="higgs">
                    <span class="status-indicator" id="status-higgs"></span>
                    <span>Higgs</span>
                </div>
                <div class="status-item" data-provider="chatterbox">
                    <span class="status-indicator" id="status-chatterbox"></span>
                    <span>Chatterbox</span>
                </div>
                <div class="status-item" data-provider="openai">
                    <span class="status-indicator" id="status-openai"></span>
                    <span>OpenAI</span>
                </div>
                <div class="status-item" data-provider="elevenlabs">
                    <span class="status-indicator" id="status-elevenlabs"></span>
                    <span>ElevenLabs</span>
                </div>
                <div class="status-item" data-provider="neutts">
                    <span class="status-indicator" id="status-neutts"></span>
                    <span>NeuTTS</span>
                </div>
            </div>
            <button class="btn btn-sm btn-secondary" id="tts-refresh-status">
                <i class="fas fa-sync"></i> Refresh Status
            </button>
        </div>

        <!-- Provider Sub-tabs -->
        <div class="tts-tabs">
            <div class="sub-tab-buttons">
                <button class="sub-tab-btn active" data-provider="vibevoice">
                    <i class="fas fa-wave-square"></i> VibeVoice
                </button>
                <button class="sub-tab-btn" data-provider="kokoro">
                    <i class="fas fa-heart"></i> Kokoro
                </button>
                <button class="sub-tab-btn" data-provider="higgs">
                    <i class="fas fa-atom"></i> Higgs
                </button>
                <button class="sub-tab-btn" data-provider="chatterbox">
                    <i class="fas fa-comments"></i> Chatterbox
                </button>
                <button class="sub-tab-btn" data-provider="openai">
                    <i class="fas fa-brain"></i> OpenAI
                </button>
                <button class="sub-tab-btn" data-provider="elevenlabs">
                    <i class="fas fa-podcast"></i> ElevenLabs
                </button>
                <button class="sub-tab-btn" data-provider="neutts">
                    <i class="fas fa-cloud"></i> NeuTTS
                </button>
            </div>

            <!-- Common Text Input Section -->
            <div class="tts-input-section card">
                <div class="card-header">
                    <h4>Text Input</h4>
                    <span class="char-counter" id="tts-char-counter">0 / 5000</span>
                </div>
                <div class="card-body">
                    <textarea id="tts-text-input" class="form-control" rows="6"
                        placeholder="Enter the text you want to convert to speech..."
                        maxlength="5000"></textarea>

                    <div class="input-controls">
                        <button class="btn btn-sm btn-secondary" id="btnTtsLoadSample">
                            <i class="fas fa-file-alt"></i> Load Sample
                        </button>
                        <button class="btn btn-sm btn-secondary" id="btnTtsClearText">
                            <i class="fas fa-eraser"></i> Clear
                        </button>
                    </div>
                </div>
            </div>

            <!-- VibeVoice Provider Tab -->
            <div class="provider-content active" id="provider-vibevoice">
                <div class="provider-settings card">
                    <div class="card-header">
                        <h4><i class="fas fa-wave-square"></i> VibeVoice Settings</h4>
                    </div>
                    <div class="card-body">
                        <div class="settings-grid">
                            <div class="setting-group">
                                <label>Model Variant</label>
                                <select id="vibevoice-model" class="form-control">
                                    <option value="1.5B">1.5B (64K context)</option>
                                    <option value="7B">7B (32K context)</option>
                                </select>
                            </div>
                            <div class="setting-group">
                                <label>Voice/Speaker</label>
                                <select id="vibevoice-voice" class="form-control">
                                    <option value="speaker_1">Speaker 1</option>
                                    <option value="speaker_2">Speaker 2</option>
                                    <option value="speaker_3">Speaker 3</option>
                                    <option value="speaker_4">Speaker 4</option>
                                </select>
                            </div>
                            <div class="setting-group">
                                <label>Custom Voice</label>
                                <select id="vibevoice-custom-voice" class="form-control">
                                    <option value="">None</option>
                                </select>
                                <button class="btn btn-sm btn-primary mt-2" id="vibevoice-open-upload">
                                    <i class="fas fa-upload"></i> Upload Voice
                                </button>
                            </div>
                            <div class="setting-group">
                                <label>Voice Reference (optional)</label>
                                <input type="file" id="vibevoice-ref-audio" class="form-control" accept="audio/*" />
                                <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px;">
                                    <button class="btn btn-sm btn-outline-primary" id="vibevoice-rec-start">
                                        <i class="fas fa-microphone"></i> Record
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger" id="vibevoice-rec-stop" disabled>
                                        <i class="fas fa-stop"></i> Stop
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary" id="vibevoice-rec-clear" disabled>
                                        <i class="fas fa-times"></i> Clear
                                    </button>
                                    <span id="vibevoice-rec-status" class="text-muted" title="If a recording is present, it overrides the selected file.">Idle (recording overrides file)</span>
                                    <span id="vibevoice-recording-badge" class="badge" style="display:none; background:#28a745; color:#fff;">Using recorded sample</span>
                                </div>
                                <audio id="vibevoice-rec-playback" controls style="width:100%; display:none; margin-top:8px;"></audio>
                                <!-- Recording Settings (collapsible) -->
                                <div class="rec-settings" style="margin-top:8px;">
                                    <div class="rec-settings-header" style="cursor:pointer; font-size:0.95em; color:#555;" data-provider="vibevoice">
                                        <span id="rec-settings-caret-vibevoice">▸</span> Recording Settings
                                    </div>
                                    <div id="rec-settings-vibevoice" class="rec-settings-body" style="display:none; margin-top:6px;">
                                        <label style="margin-left:2px; font-size:0.9em;">Max sec:
                                            <input
                                                type="number"
                                                id="vibevoice-rec-max"
                                                value="15"
                                                min="3"
                                                max="60"
                                                style="width:64px;"
                                                title="3-15 seconds recommended. Longer clips increase CPU usage and latency."
                                            />
                                            <span class="help-tip" title="3-15 seconds recommended. Longer clips increase CPU usage and latency.">?</span>
                                        </label>
                                        <small style="margin-left:8px;"><a href="#" class="rec-reset" data-provider="vibevoice">Reset</a></small>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-group">
                                <label>Speaker Count</label>
                                <input type="number" id="vibevoice-speakers" class="form-control"
                                    min="1" max="4" value="1">
                            </div>
                            <div class="setting-group">
                                <label>Features</label>
                                <div class="checkbox-group">
                                    <label class="checkbox-label">
                                        <input type="checkbox" id="vibevoice-music">
                                        Background Music
                                    </label>
                                    <label class="checkbox-label">
                                        <input type="checkbox" id="vibevoice-singing">
                                        Enable Singing
                                    </label>
                                </div>
                            </div>
                            <div class="setting-group">
                                <label>CFG Scale <span class="param-value" id="vibevoice-cfg-value">1.3</span></label>
                                <input type="range" id="vibevoice-cfg" class="form-control-range"
                                    min="1.0" max="2.0" step="0.1" value="1.3">
                                <small class="form-text text-muted">Controls generation guidance strength</small>
                            </div>
                            <div class="setting-group">
                                <label>Diffusion Steps <span class="param-value" id="vibevoice-steps-value">20</span></label>
                                <input type="range" id="vibevoice-steps" class="form-control-range"
                                    min="5" max="100" step="5" value="20">
                                <small class="form-text text-muted">Quality vs speed tradeoff</small>
                            </div>
                            <div class="setting-group">
                                <label>Temperature <span class="param-value" id="vibevoice-temp-value">1.0</span></label>
                                <input type="range" id="vibevoice-temperature" class="form-control-range"
                                    min="0.1" max="2.0" step="0.1" value="1.0">
                                <small class="form-text text-muted">Sampling randomness</small>
                            </div>
                            <div class="setting-group">
                                <label>Top-p <span class="param-value" id="vibevoice-topp-value">0.95</span></label>
                                <input type="range" id="vibevoice-topp" class="form-control-range"
                                    min="0.1" max="1.0" step="0.05" value="0.95">
                                <small class="form-text text-muted">Nucleus sampling</small>
                            </div>
                            <div class="setting-group">
                                <label>Seed (optional)</label>
                                <input type="number" id="vibevoice-seed" class="form-control"
                                    placeholder="Random" min="0" max="4294967295">
                                <small class="form-text text-muted">For reproducible generation</small>
                            </div>
                            <div class="setting-group">
                                <label>Attention Type</label>
                                <select id="vibevoice-attention" class="form-control">
                                    <option value="auto">Auto</option>
                                    <option value="sdpa">SDPA</option>
                                    <option value="flash_attention_2">Flash Attention 2</option>
                                    <option value="eager">Eager</option>
                                </select>
                                <small class="form-text text-muted">Performance optimization</small>
                            </div>
                        </div>
                        <div class="info-box">
                            <h5>Multi-Speaker Format</h5>
                            <p>Use these formats for multi-speaker dialogue:</p>
                            <ul>
                                <li><code>[1]: Hello there</code></li>
                                <li><code>Speaker 1: How are you?</code></li>
                                <li><code>[Speaker1]: Nice to meet you</code></li>
                            </ul>
                            <p>Supports up to 4 speakers in a single generation.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Kokoro Provider Tab -->
            <div class="provider-content" id="provider-kokoro">
                <div class="provider-settings card">
                    <div class="card-header">
                        <h4><i class="fas fa-heart"></i> Kokoro Settings</h4>
                    </div>
                    <div class="card-body">
                        <div class="settings-grid">
                            <div class="setting-group">
                                <label>Voice Selection</label>
                                <select id="kokoro-voice" class="form-control">
                                    <optgroup label="American Female">
                                        <option value="af_bella">Bella - Standard</option>
                                        <option value="af_sky">Sky - Young</option>
                                        <option value="af_heart">Heart - Warm</option>
                                    </optgroup>
                                    <optgroup label="American Male">
                                        <option value="am_adam">Adam - Standard</option>
                                        <option value="am_michael">Michael - Deep</option>
                                    </optgroup>
                                    <optgroup label="British Female">
                                        <option value="bf_emma">Emma - Standard</option>
                                        <option value="bf_isabella">Isabella - Elegant</option>
                                    </optgroup>
                                    <optgroup label="British Male">
                                        <option value="bm_george">George - Standard</option>
                                        <option value="bm_lewis">Lewis - Young</option>
                                    </optgroup>
                                </select>
                            </div>
                            <div class="setting-group">
                                <label>Voice Mixing</label>
                                <input type="text" id="kokoro-voice-mix" class="form-control"
                                    placeholder="e.g., af_bella(2)+af_sky(1)">
                                <small class="text-muted">Mix voices with weights</small>
                            </div>
                            <div class="setting-group">
                                <label>Speed</label>
                                <input type="range" id="kokoro-speed" class="form-control-range"
                                    min="0.5" max="2.0" value="1.0" step="0.1">
                                <span id="kokoro-speed-value">1.0x</span>
                            </div>
                            <div class="setting-group">
                                <label>Backend</label>
                                <div class="badge badge-info">ONNX (Optimized)</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Higgs Provider Tab -->
            <div class="provider-content" id="provider-higgs">
                <div class="provider-settings card">
                    <div class="card-header">
                        <h4><i class="fas fa-atom"></i> Higgs Audio Settings</h4>
                    </div>
                    <div class="card-body">
                        <div class="settings-grid">
                            <div class="setting-group">
                                <label>Language (50+ supported)</label>
                                <select id="higgs-language" class="form-control">
                                    <option value="en">English</option>
                                    <option value="zh">Chinese</option>
                                    <option value="es">Spanish</option>
                                    <option value="fr">French</option>
                                    <option value="de">German</option>
                                    <option value="ja">Japanese</option>
                                    <option value="ko">Korean</option>
                                    <option value="ru">Russian</option>
                                    <option value="ar">Arabic</option>
                                    <option value="hi">Hindi</option>
                                </select>
                            </div>
                            <div class="setting-group">
                                <label>Voice Style</label>
                                <select id="higgs-voice" class="form-control">
                                    <option value="narrator">Narrator</option>
                                    <option value="conversational">Conversational</option>
                                    <option value="expressive">Expressive</option>
                                    <option value="melodic">Melodic</option>
                                </select>
                            </div>
                            <div class="setting-group">
                                <label>Voice Clone (3-10s audio)</label>
                                <input type="file" id="higgs-voice-upload" class="form-control-file"
                                    accept="audio/*">
                                <button class="btn btn-sm btn-primary mt-2" id="higgs-upload-voice-clone">
                                    <i class="fas fa-clone"></i> Clone Voice
                                </button>
                            </div>
                            <div class="setting-group">
                                <label>Quick Record (mic) <span class="help-tip" title="Record a clean mono clip of 3-15 seconds in a quiet environment. Avoid background noise and overlapping speakers. Recording overrides file selection.">?</span></label>
                                <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
                                    <button class="btn btn-sm btn-outline-primary" id="higgs-rec-start">
                                        <i class="fas fa-microphone"></i> Record
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger" id="higgs-rec-stop" disabled>
                                        <i class="fas fa-stop"></i> Stop
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary" id="higgs-rec-clear" disabled>
                                        <i class="fas fa-times"></i> Clear
                                    </button>
                                    <span id="higgs-rec-status" class="text-muted" title="If a recording is present, it overrides the selected file.">Idle (recording overrides file)</span>
                                    <span id="higgs-recording-badge" class="badge" style="display:none; background:#28a745; color:#fff;">Using recorded sample</span>
                                </div>
                                <audio id="higgs-rec-playback" controls style="width:100%; display:none; margin-top:8px;"></audio>
                                <!-- Recording Settings (collapsible) -->
                                <div class="rec-settings" style="margin-top:8px;">
                                    <div class="rec-settings-header" style="cursor:pointer; font-size:0.95em; color:#555;" data-provider="higgs">
                                        <span id="rec-settings-caret-higgs">▸</span> Recording Settings
                                    </div>
                                    <div id="rec-settings-higgs" class="rec-settings-body" style="display:none; margin-top:6px;">
                                        <label style="margin-left:2px; font-size:0.9em;">Max sec:
                                            <input
                                                type="number"
                                                id="higgs-rec-max"
                                                value="15"
                                                min="3"
                                                max="60"
                                                style="width:64px;"
                                                title="3-15 seconds recommended. Longer clips increase CPU usage and latency."
                                            />
                                            <span class="help-tip" title="3-15 seconds recommended. Longer clips increase CPU usage and latency.">?</span>
                                        </label>
                                        <small style="margin-left:8px;"><a href="#" class="rec-reset" data-provider="higgs">Reset</a></small>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-group">
                                <label>Features</label>
                                <div class="checkbox-group">
                                    <label class="checkbox-label">
                                        <input type="checkbox" id="higgs-music">
                                        Generate Music
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Chatterbox Provider Tab -->
            <div class="provider-content" id="provider-chatterbox">
                <div class="provider-settings card">
                    <div class="card-header">
                        <h4><i class="fas fa-comments"></i> Chatterbox Settings</h4>
                    </div>
                    <div class="card-body">
                        <div class="settings-grid">
                            <div class="setting-group">
                                <label>Voice</label>
                                <select id="chatterbox-voice" class="form-control">
                                    <option value="default">Default</option>
                                    <option value="energetic">Energetic</option>
                                    <option value="calm">Calm</option>
                                    <option value="professional">Professional</option>
                                </select>
                            </div>
                            <div class="setting-group">
                                <label>Emotion</label>
                                <select id="chatterbox-emotion" class="form-control">
                                    <option value="neutral">Neutral</option>
                                    <option value="happy">Happy</option>
                                    <option value="sad">Sad</option>
                                    <option value="angry">Angry</option>
                                    <option value="surprised">Surprised</option>
                                    <option value="excited">Excited</option>
                                </select>
                            </div>
                            <div class="setting-group">
                                <label>Emotion Intensity</label>
                                <input type="range" id="chatterbox-intensity" class="form-control-range"
                                    min="0" max="100" value="50">
                                <span id="chatterbox-intensity-value">50%</span>
                            </div>
                            <div class="setting-group">
                                <label>Voice Clone (5-20s audio)</label>
                                <input type="file" id="chatterbox-voice-upload" class="form-control-file"
                                    accept="audio/*">
                                <button class="btn btn-sm btn-primary mt-2" id="chatterbox-upload-voice-clone">
                                    <i class="fas fa-clone"></i> Clone Voice
                                </button>
                            </div>
                            <div class="setting-group">
                                <label>Quick Record (mic) <span class="help-tip" title="Record a clean mono clip of 5-20 seconds in a quiet environment. Avoid background noise and overlapping speakers. Recording overrides file selection.">?</span></label>
                                <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
                                    <button class="btn btn-sm btn-outline-primary" id="chatterbox-rec-start">
                                        <i class="fas fa-microphone"></i> Record
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger" id="chatterbox-rec-stop" disabled>
                                        <i class="fas fa-stop"></i> Stop
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary" id="chatterbox-rec-clear" disabled>
                                        <i class="fas fa-times"></i> Clear
                                    </button>
                                    <span id="chatterbox-rec-status" class="text-muted" title="If a recording is present, it overrides the selected file.">Idle (recording overrides file)</span>
                                    <span id="chatterbox-recording-badge" class="badge" style="display:none; background:#28a745; color:#fff;">Using recorded sample</span>
                                </div>
                                <audio id="chatterbox-rec-playback" controls style="width:100%; display:none; margin-top:8px;"></audio>
                                <!-- Recording Settings (collapsible) -->
                                <div class="rec-settings" style="margin-top:8px;">
                                    <div class="rec-settings-header" style="cursor:pointer; font-size:0.95em; color:#555;" data-provider="chatterbox">
                                        <span id="rec-settings-caret-chatterbox">▸</span> Recording Settings
                                    </div>
                                    <div id="rec-settings-chatterbox" class="rec-settings-body" style="display:none; margin-top:6px;">
                                        <label style="margin-left:2px; font-size:0.9em;">Max sec:
                                            <input
                                                type="number"
                                                id="chatterbox-rec-max"
                                                value="15"
                                                min="3"
                                                max="60"
                                                style="width:64px;"
                                                title="3-15 seconds recommended. Longer clips increase CPU usage and latency."
                                            />
                                            <span class="help-tip" title="3-15 seconds recommended. Longer clips increase CPU usage and latency.">?</span>
                                        </label>
                                        <small style="margin-left:8px;"><a href="#" class="rec-reset" data-provider="chatterbox">Reset</a></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- OpenAI Provider Tab -->
            <div class="provider-content" id="provider-openai">
                <div class="provider-settings card">
                    <div class="card-header">
                        <h4><i class="fas fa-brain"></i> OpenAI Settings</h4>
                    </div>
                    <div class="card-body">
                        <div class="settings-grid">
                            <div class="setting-group">
                                <label>Model</label>
                                <select id="openai-model" class="form-control">
                                    <option value="tts-1">TTS-1 (Standard)</option>
                                    <option value="tts-1-hd">TTS-1-HD (High Quality)</option>
                                </select>
                            </div>
                            <div class="setting-group">
                                <label>Voice</label>
                                <select id="openai-voice" class="form-control">
                                    <option value="alloy">Alloy</option>
                                    <option value="echo">Echo</option>
                                    <option value="fable">Fable</option>
                                    <option value="onyx">Onyx</option>
                                    <option value="nova">Nova</option>
                                    <option value="shimmer">Shimmer</option>
                                </select>
                            </div>
                            <div class="setting-group">
                                <label>Speed</label>
                                <input type="range" id="openai-speed" class="form-control-range"
                                    min="0.25" max="4.0" value="1.0" step="0.25">
                                <span id="openai-speed-value">1.0x</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ElevenLabs Provider Tab -->
            <div class="provider-content" id="provider-elevenlabs">
                <div class="provider-settings card">
                    <div class="card-header">
                        <h4><i class="fas fa-podcast"></i> ElevenLabs Settings</h4>
                    </div>
                    <div class="card-body">
                        <div class="settings-grid">
                            <div class="setting-group">
                                <label>Voice</label>
                                <select id="elevenlabs-voice" class="form-control">
                                    <option value="rachel">Rachel</option>
                                    <option value="domi">Domi</option>
                                    <option value="bella">Bella</option>
                                    <option value="antoni">Antoni</option>
                                    <option value="elli">Elli</option>
                                    <option value="josh">Josh</option>
                                </select>
                            </div>
                            <div class="setting-group">
                                <label>Model</label>
                                <select id="elevenlabs-model" class="form-control">
                                    <option value="eleven_monolingual_v1">Monolingual v1</option>
                                    <option value="eleven_multilingual_v2">Multilingual v2</option>
                                </select>
                            </div>
                            <div class="setting-group">
                                <label>Voice Stability</label>
                                <input type="range" id="elevenlabs-stability" class="form-control-range"
                                    min="0" max="100" value="50">
                                <span id="elevenlabs-stability-value">50%</span>
                            </div>
                            <div class="setting-group">
                                <label>Clarity + Similarity</label>
                                <input type="range" id="elevenlabs-clarity" class="form-control-range"
                                    min="0" max="100" value="75">
                                <span id="elevenlabs-clarity-value">75%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- NeuTTS Provider Tab -->
            <div class="provider-content" id="provider-neutts">
                <div class="provider-settings card">
                    <div class="card-header">
                        <h4><i class="fas fa-cloud"></i> NeuTTS Settings</h4>
                    </div>
                    <div class="card-body">
                        <div class="settings-grid">
                            <div class="setting-group">
                                <label>Model</label>
                                <select id="neutts-model" class="form-control">
                                    <option value="neutts-air">neutts-air (HF, non-streaming)</option>
                                    <option value="neutts-air-q8-gguf">neutts-air-q8-gguf (GGUF, streaming)</option>
                                    <option value="neutts-air-q4-gguf">neutts-air-q4-gguf (GGUF, streaming)</option>
                                </select>
                            </div>
                            <div class="setting-group">
                                <label>Reference Audio (3-15s)</label>
                                <input type="file" id="neutts-ref-audio" class="form-control" accept="audio/*" />
                                <small class="text-muted" title="If a recording is present, it overrides the selected file.">Note: recording overrides file selection.</small>
                            </div>
                            <div class="setting-group">
                                <label>Reference Text (matches audio)</label>
                                <input type="text" id="neutts-ref-text" class="form-control" placeholder="What is said in the reference clip" />
                            </div>
                            <div class="setting-group">
                                <label>Quick Record (mic) <span class="help-tip" title="Record a clean mono clip of 3-10 seconds in a quiet environment. Avoid background noise and overlapping speakers. Recording overrides file selection.">?</span></label>
                                <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
                                    <button class="btn btn-sm btn-outline-primary" id="neutts-rec-start">
                                        <i class="fas fa-microphone"></i> Record
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger" id="neutts-rec-stop" disabled>
                                        <i class="fas fa-stop"></i> Stop
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary" id="neutts-rec-clear" disabled>
                                        <i class="fas fa-times"></i> Clear
                                    </button>
                                    <span id="neutts-rec-status" class="text-muted" title="If a recording is present, it overrides the selected file.">Idle (recording overrides file)</span>
                                    <span id="neutts-recording-badge" class="badge" style="display:none; background:#28a745; color:#fff;">Using recorded sample</span>
                                </div>
                                <!-- Recording Settings (collapsible) -->
                                <div class="rec-settings" style="margin-top:8px;">
                                    <div class="rec-settings-header" style="cursor:pointer; font-size:0.95em; color:#555;" data-provider="neutts">
                                        <span id="rec-settings-caret-neutts">▸</span> Recording Settings
                                    </div>
                                    <div id="rec-settings-neutts" class="rec-settings-body" style="display:none; margin-top:6px;">
                                        <label style="margin-left:2px; font-size:0.9em;">Max sec:
                                            <input
                                                type="number"
                                                id="neutts-rec-max"
                                                value="15"
                                                min="3"
                                                max="60"
                                                style="width:64px;"
                                                title="3-15 seconds recommended. Longer clips increase CPU usage and latency."
                                            />
                                            <span class="help-tip" title="3-15 seconds recommended. Longer clips increase CPU usage and latency.">?</span>
                                        </label>
                                        <small style="margin-left:8px;"><a href="#" class="rec-reset" data-provider="neutts">Reset</a></small>
                                    </div>
                                </div>
                                <audio id="neutts-rec-playback" controls style="width:100%; display:none; margin-top:8px;"></audio>
                                <small class="text-muted">The recorded clip will be used as the reference audio automatically and overrides file selection.</small>
                            </div>
                            <div class="setting-group">
                                <small class="text-muted">Tip: Enable streaming only when using a GGUF model.</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Common Generation Controls -->
            <div class="generation-controls card">
                <div class="card-header">
                    <h4>Generation Options</h4>
                </div>
                <div class="card-body">
                    <div class="controls-grid">
                        <div class="control-group">
                            <label>Audio Format</label>
                            <select id="tts-format" class="form-control">
                                <option value="mp3">MP3</option>
                                <option value="wav">WAV</option>
                                <option value="opus">OPUS</option>
                                <option value="aac">AAC</option>
                                <option value="flac">FLAC</option>
                            </select>
                        </div>
                        <div class="control-group">
                            <label>Streaming</label>
                            <label class="switch">
                                <input type="checkbox" id="tts-streaming" checked>
                                <span class="slider round"></span>
                            </label>
                        </div>
                        <div class="control-group">
                            <button id="tts-generate-btn" class="btn btn-primary btn-lg">
                                <i class="fas fa-play"></i> Generate Speech
                            </button>
                            <button id="tts-stop-btn" class="btn btn-danger btn-lg" style="display:none;">
                                <i class="fas fa-stop"></i> Stop
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Audio Player Section -->
            <div class="audio-player-section card">
                <div class="card-header">
                    <h4>Audio Output</h4>
                </div>
                <div class="card-body">
                    <div id="tts-audio-container">
                        <audio id="tts-audio-player" controls style="width: 100%;"></audio>
                        <div class="audio-controls">
                            <button class="btn btn-secondary" id="tts-download-btn" disabled>
                                <i class="fas fa-download"></i> Download
                            </button>
                            <button class="btn btn-secondary" id="tts-save-history-btn">
                                <i class="fas fa-history"></i> Save to History
                            </button>
                        </div>
                    </div>
                    <div id="tts-status" class="status-message"></div>
                </div>
            </div>

            <!-- Voice Management Section -->
            <div class="voice-management card">
                <div class="card-header">
                    <h4>Voice Library</h4>
                    <button class="btn btn-sm btn-primary" id="tts-voices-refresh">
                        <i class="fas fa-sync"></i> Refresh
                    </button>
                </div>
                <div class="card-body">
                    <div id="voice-list" class="voice-grid">
                        <!-- Voice items will be populated here -->
                    </div>
                </div>
            </div>

            <!-- Generation History -->
            <div class="generation-history card">
                <div class="card-header">
                    <h4>Generation History</h4>
                    <button class="btn btn-sm btn-secondary" id="tts-history-clear">
                        <i class="fas fa-trash"></i> Clear
                    </button>
                </div>
                <div class="card-body">
                    <div id="tts-history" class="history-list">
                        <!-- History items will be populated here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Voice Upload Modal -->
<div id="voice-upload-modal" class="modal" style="display:none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Upload Voice Sample</h3>
            <span class="close" id="tts-upload-close">&times;</span>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label>Voice Name</label>
                <input type="text" id="voice-upload-name" class="form-control" placeholder="Enter voice name">
            </div>
            <div class="form-group">
                <label>Description</label>
                <textarea id="voice-upload-description" class="form-control" rows="2"
                    placeholder="Optional description"></textarea>
            </div>
            <div class="form-group">
                <label>Audio File</label>
                <input type="file" id="voice-upload-file" class="form-control-file" accept="audio/*">
                <small class="text-muted">
                    Requirements vary by provider:
                    <ul>
                        <li>VibeVoice: Any duration (1-shot cloning)</li>
                        <li>Higgs: 3-10 seconds recommended</li>
                        <li>Chatterbox: 5-20 seconds recommended</li>
                    </ul>
                </small>
            </div>
            <div class="form-group">
                <button class="btn btn-primary" id="tts-upload-submit">
                    <i class="fas fa-upload"></i> Upload Voice
                </button>
                <button class="btn btn-secondary" id="tts-upload-cancel">Cancel</button>
            </div>
        </div>
    </div>
</div>

<style>
/* TTS Tab Styles */
.provider-status-bar {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.status-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-text-muted);
}

.status-indicator.active {
    background: var(--color-success);
    box-shadow: 0 0 8px var(--color-success);
}

.status-indicator.error {
    background: var(--color-danger);
}

.sub-tab-buttons {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: var(--spacing-md);
}

.sub-tab-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    cursor: pointer;
    transition: var(--transition-fast);
}

.sub-tab-btn.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.sub-tab-btn:hover:not(.active) {
    background: var(--color-surface-alt);
}

.provider-content {
    display: none;
}

.provider-content.active {
    display: block;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.setting-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.controls-grid {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-lg);
}

.control-group {
    flex: 1;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-text-muted);
    transition: .4s;
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.switch input:checked + .slider {
    background-color: var(--color-primary);
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

.switch input:checked + .slider:before {
    transform: translateX(26px);
}

.audio-controls {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.voice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.voice-item {
    padding: var(--spacing-md);
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
}

.voice-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.history-list {
    max-height: 300px;
    overflow-y: auto;
}

.history-item {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.char-counter {
    color: var(--color-text-muted);
    font-size: 0.9em;
}

.status-message {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    display: none;
}

.status-message.info {
    background: var(--color-info-bg);
    color: var(--color-info);
    display: block;
}

.status-message.success {
    background: var(--color-success-bg);
    color: var(--color-success);
    display: block;
}

.status-message.error {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    display: block;
}

/* Advanced parameter styles */
.param-value {
    font-weight: bold;
    color: var(--color-primary);
    margin-left: var(--spacing-xs);
}

.form-control-range {
    width: 100%;
    margin: var(--spacing-xs) 0;
}

.info-box {
    background: var(--color-info-bg, #e3f2fd);
    border: 1px solid var(--color-info-border, #90caf9);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.info-box h5 {
    margin-top: 0;
    color: var(--color-info-text, #1976d2);
}

.info-box code {
    background: var(--color-surface);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: monospace;
}

.info-box ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
}

.info-box li {
    margin: var(--spacing-xs) 0;
}
</style>
